<template>
  <div>
    <!-- <router-link to="/profile">个人主页</router-link> -->
    <homeHeader />
    <!-- sticky swipeable 是左右滑动 -->
    <van-tabs v-model="activeTab" sticky swipeable>
      <van-tab v-for="(tabitem,index) in tabList" :title="tabitem.name" :key="index">

        <van-list v-model="loading" 
        :finished="tabitem.finished"
        finished-text='没有更多'
        @load="loadMorePost"
        :immediate-check="false"
        >
        <post :post='post' v-for="(post,index) in tabitem.posts" :key="index"></post>
      </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import homeHeader from "../components/homeHeader";
import post from "../components/post";
export default {
  components: {
    homeHeader:homeHeader,
    post
  },
  data() {
    return {
      activeTab: localStorage.getItem("token") ? 1 : 0,
      tabList: [],
      pageSize:6,
      loading:false
    };
  },
  mounted() {
    this.initTabList();
  },
  methods: {
    initTabList() {
      // 栏目列表ajax
      this.$axios({
        url: "/category",
        method: "get"
      }).then(res => {
        console.log(res.data);
        const { data } = res.data;
        data.forEach(Element => {
          // console.log(Element);
          Element.posts = [];
          Element.currentPage =1;
          Element.finished =false;
        });
        this.tabList = data;
        this.getTabPosts(this.activeTab);
      });
    },
    loadMorePost(){
      // 加载函数
      console.log('触发加载函数');
      // setTimeout(()=>{
        // 将当前 tab 分类下面记录的 currentPage 加1
        this.tabList[this.activeTab].currentPage += 1;
         // 发送 ajax 请求获取新文章
        this.getTabPosts(this.activeTab)
      // },3000)
      
    },
    getTabPosts(tabIndex) {
      const categoryId = this.tabList[tabIndex].id;
        // 根据这个 id 获取对应分类的文章列表
        console.log(this.tabList[tabIndex].currentPage);
        
      this.$axios({
        url: "/post",
        method: "get",
        // get 请求可以使用 params 的属性来带参数
        params: {
          category: categoryId,
          pageSize:this.pageSize,
          pageIndex:this.tabList[tabIndex].currentPage

        }
      }).then(res => {
        const { data } = res.data;
         // 使用 es6 解构语法拼接数据
        const newData  = [...this.tabList[tabIndex].posts,...data];

        this.tabList[tabIndex].posts = newData;
        console.log(this.tabList[tabIndex]);

        this.loading = false;
        
        if(data.length <this.pageSize){
            this.tabList[this.activeTab].finished = true;
        }

      });
    }
  },

  watch: {
    // 监听当前激活分类 tabIndex 的变化, 重新拉取文章数据
    activeTab(newActiveTab) {
      // 这里是每次切换 tab 都会触发 ajax 请求
      // 问题在于我们对于那些已经请求过数据,有了 posts 的分类是不需要这个重新请求的
      if (this.tabList[newActiveTab].posts.length == 0) {
        // 如果这个被选中的 tabIndex 对应哪个 tab 对象里面的 posts 长度为 0
        // 证明没有数据,于是发送请求,不然就不去管
        this.getTabPosts(newActiveTab);
      }
    }
  },
};
</script>

<style>
</style>